<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/jstl.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<!-- Always force latest IE rendering engine or request Chrome Frame -->
  	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
  	<link rel="stylesheet" href="../css/bootstrap.min.css">
 	<link rel="stylesheet" href="../css/animate.min.css">
	<title>首页</title>
  <style type="text/css">
    body{
      background: url("../img/bg-login.jpg") fixed;
      background-size: 100%;
      margin: 0px;
      padding: 0px;
    }
    .login-bg{
      margin: 200px auto 0 auto;
      height: 300px;
      background: rgba(0,0,0,.7);
      vertical-align: baseline;
    }
    .form-signin {
      max-width: 300px;
      padding: 19px 29px 29px;
      margin: 0 auto 20px;
      color:#fff;
      -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
              border-radius: 5px;
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
         -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
              box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .form-signin .form-signin-heading,
    .form-signin .checkbox {
      margin-bottom: 10px;
    }
    .form-signin input[type="text"],
    .form-signin input[type="password"] {
      font-size: 16px;
      height: auto;
      margin-bottom: 15px;
      padding: 7px 9px;
    }
    .login-form{
      -vendor-animation-duration: 2s;
      -vendor-animation-delay: 3s;
      -vendor-animation-iteration-count: infinite;
    }
  </style>
</head>
<body>

  <div class="login-bg">
    <form class="form-signin login-form" id="form1" action="/admin/login.jspx" method="post">
        <h2 class="form-signin-heading">
          Book Store
        </h2>
        <c:if test="${param.error=='10001'}">
			<div id="error" class="alert alert-success" style="color:red">
				用户名或密码错误
			</div>
		</c:if>
        <div class="alert alert-error" style="display:none">
  			<div id="svalu" style="display:none">用户名不能为空</div>
  			<div id="svalp" style="display:none">密码不能为空</div>
		</div>
        <input type="text" id="user" name="username" class="input-block-level" placeholder="账号" x-webkit-speech="undefined">
        <input type="password" id="pwd" name="password" class="input-block-level" placeholder="密码">
        <button class="btn btn-large btn-block btn-success" type="button">Sign in</button>
    </form>
  </div>

  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".login-form").addClass("animated fadeInDown");
      $(".btn").click(function(){
    	  $("#error").hide();
		var uservalue=$("#user").val();
		var pwdvalue=$("#pwd").val();
    	  if(!uservalue){
    		  $(".alert-error").show();
    		  $("#svalu").show();
    		  $("#user").focus();
    	  }else if(!pwdvalue){
    		  $(".alert-error").show();
    		  $("#svalp").show();
    		  $("#pwd").focus();
    	  }
    	  $("#user").keydown(function(){
    		  $("#svalu").hide();
    		  $(".alert-error").hide();
    	  });
    	  $("#pwd").keydown(function(){
    		  $("#svalp").hide();
    		  $(".alert-error").hide();
    	  });
    	  if(uservalue&&pwdvalue){
    		  $("#form1").submit();
    	  }
        /*$(".login-form").removeClass("animated fadeInDown");
        $(".login-form").addClass("animated shake");
        window.setTimeout( function(){$('.login-form').removeClass("animated shake")},1300);
*/
      });
    });
  </script>

</body>
</html>